<template>
	<view class="content">
		<view class="content_search u-border-bottom">
			<view @tap="clickInput">
				<u-search placeholder='搜索' shape='square' :show-action="false" :bg-color="'#ffffff'" :disabled="true"></u-search>
			</view>
		</view>
		<u-index-list :scrollTop="scrollTop" :index-list="indexList" :active-color="'#3CC51F'">
			<view v-for="(item,index) in indexList" :key="index">
				<u-index-anchor :index="item"></u-index-anchor>
				<view v-for="user in firendList" :key="user.userId" class="list-cell" @click="linkToCard(user)"
					hover-class="message-hover-class">
					<image :src="user.headImg" mode="aspectFill"></image>
					<view class="list-cell-name">
						{{ user.name }}
					</view>
				</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	import searchInput from '@/components/searchInput/index.vue';
	export default {
		components: {
			searchInput
		},
		data() {
			return {
				scrollTop: 0,
				indexList: ['🌟', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y',
					'Z'
				],
				firendList: [{
						userId: 1,
						headImg: '/static/img/avatar/avatar1.jpg',
						name: '张三',
						message: '吃了吗',
						time: "15:31"
					},
					{
						userId: 2,
						headImg: '/static/img/avatar/avatar1.jpg',
						name: '李四',
						message: '吃了吗',
						time: "15:31"
					}/* ,
					{
						id: 3,
						headImg: '/static/img/avatar/avatar1.jpg',
						name: '王五',
						message: '吃了吗',
						time: "15:31"
					},
					{
						id: 4,
						headImg: '/static/img/avatar/avatar1.jpg',
						name: '阿权',
						message: '吃了吗',
						time: "15:31"
					},
					{
						id: 5,
						img: '/static/img/avatar/avatar1.jpg',
						name: '磨合',
						message: '吃了吗',
						time: "15:31"
					},
					{
						id: 6,
						img: '/static/img/avatar/avatar1.jpg',
						name: '驾鹤西去',
						message: '吃了吗',
						time: "15:31"
					},
					{
						id: 7,
						img: '/static/img/avatar/avatar1.jpg',
						name: '张四',
						message: '吃了吗',
						time: "15:31"
					},
					{
						id: 8,
						img: '/static/img/avatar/avatar1.jpg',
						name: '张三丰',
						message: '吃了吗',
						time: "15:31"
					} */
				]
			};
		},
		methods: {
			linkToCard({
				userId
			}) {
				/* uni.navigateTo({
					url: '/businessCard.vue',
					params: {
						userId
					}
				}) */
				uni.showToast({
					title: '功能尚未开发'
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		.content_search {
			padding: 16rpx;
			background-color: #f8f8f8;
		}
		.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24px;
			overflow: hidden;
			color: #323233;
			font-size: 28rpx;
			line-height: 48rpx;
			background-color: #fff;
			align-items: center;

			image {
				width: 76rpx;
				height: 76rpx;
				border-radius: 12rpx;
				flex: 0 0 76rpx;
			}

			&-name {
				padding-left: 20rpx;
			}
		}
	}
</style>